import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { useNavigate, Routes, Route, Navigate } from 'react-router-dom';
import {
  DesktopOutlined,
  FormOutlined,
  TableOutlined,
  LayoutOutlined,
} from '@ant-design/icons';
import { routes } from '../routes';

const { Header, Sider, Content } = Layout;

// 主布局组件，包含左侧菜单和内容区
const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();

  // 菜单配置
  const menuItems = [
    {
      key: 'basic',
      icon: <DesktopOutlined />,
      label: '基础组件',
      children: [
        { key: 'basic/button', label: '按钮 Button' },
        { key: 'basic/typography', label: '排版 Typography' },
        { key: 'basic/icon', label: '图标 Icon' },
        { key: 'basic/space', label: '间距 Space' },
      ]
    },
    {
      key: 'layout',
      icon: <LayoutOutlined />,
      label: '布局组件',
      children: [
        { key: 'layout/grid', label: '栅格 Grid' },
        { key: 'layout/layout', label: '布局 Layout' },
      ]
    },
    {
      key: 'form',
      icon: <FormOutlined />,
      label: '表单组件',
      children: [
        { key: 'form/basic-form', label: '基础表单' },
        { key: 'form/advanced-form', label: '高级表单' },
      ]
    },
    {
      key: 'data',
      icon: <TableOutlined />,
      label: '数据展示',
      children: [
        { key: 'data/table', label: '表格 Table' },
        { key: 'data/list', label: '列表 List' },
      ]
    },
  ];

  const handleMenuClick = ({ key }) => {
    navigate(`/${key}`);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
        <Menu
          theme="dark"
          defaultSelectedKeys={['basic/button']}
          mode="inline"
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: '#fff' }} />
        <Content style={{ margin: '16px' }}>
          <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
            <Routes>
              <Route path="/" element={<Navigate to="/basic/button" replace />} />
              {routes.map((route) => (
                <Route key={route.path} path={route.path} element={route.element} />
              ))}
            </Routes>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout; 